<template>
    <div class="address">
        <van-nav-bar title="消息" class="header" left-text="">
            <template #right>
                <div @click="jumpPage('/chatmember')" class="panel">
                    <van-icon
                            name="contact"
                            color="#739576"
                            size="30"
                            style="margin-top: 5px"
                    />
                </div>

                <!-- <div @click="goToGroup()" class="panel">

                  <van-icon
                    name="friends-o"
                    color="#739576"
                    size="30"
                    style="margin-top: 10px"
                  />
                </div> -->
            </template>
        </van-nav-bar>
        <!-- 消息列表是:{{chatList}}<br>
        消息是:{{ee}} -->

        <!-- 下拉刷新 -->
        <van-pull-refresh
                v-model="isLoading"
                @refresh="onRefresh"
                style="height: 100%; width: 100%"
        >
            <div v-if="notfound" class="notfound">
                <img src="img/notfound/notfound.png"/>
            </div>

            <div v-else class="botbox">
                <div v-for="(item,index) in chatList" :key="index" @click="toChat(item)">
                    <van-swipe-cell>
                        <van-cell :border="false">
                            <div class="chatlistitem">
                                <div style="height: 100%">
                                    <img
                                            style="height: 4rem; width: 4rem; margin: 0.5rem"
                                            v-if="item.isgroup === false"
                                            src="img/headimg/head_icon_2.png"
                                            alt
                                    />
                                    <img
                                            style="height: 4rem; width: 4rem; margin: 0.5rem"
                                            v-if="item.isgroup === true"
                                            src="img/headimg/head_icon.png"
                                            alt
                                    />
                                </div>
                                <div
                                        style="
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 0.5rem 0 0.5rem 0.5rem;
                  "
                                >
                                    <div
                                            style="
                      flex: 1;
                      display: flex;
                      font-size: 1rem;
                      align-items: center;
                      line-height: 2rem;
                    "
                                    >
                                        {{ item.name }}
                                    </div>
                                    <div style="line-height: 2rem" v-if="item.type == '0'">
                                        {{
                                        item.content.length > 20
                                        ? item.content.substr(0, 20) + "..."
                                        : item.content
                                        }}
                                    </div>
                                    <div style="line-height: 2rem" v-if="item.type == '1'">
                                        {{
                                        item.content.substring(item.content.length - 4) == ".txt"
                                        ? "[语音]"
                                        : "[不支持播放类型]"
                                        }}
                                    </div>
                                    <div style="line-height: 2rem" v-if="item.type == '2'">
                                        [图片]
                                    </div>
                                </div>
                                <div style="margin-left: auto; padding: 0.5rem 0 0.5rem 0.5rem">
                                    <div
                                            style="
                      font-size: 1rem;
                      align-items: center;
                      line-height: 2rem;
                    "
                                    >
                                        {{ item.time }}
                                    </div>
                                    <div style="line-height: 2rem">
                    <span
                            class="listErrorContent"
                            v-show="item.isread === false || item.isread == 0"
                    >！未读</span
                    >
                                    </div>
                                </div>
                            </div>
                            <!-- {{item.isread}} -->
                        </van-cell>
                        <template #right>
                            <van-button
                                    style="height: 100%"
                                    square
                                    type="danger"
                                    text="删除"
                                    @click="deleteChat(item.id)"
                            />
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
        </van-pull-refresh>
        <!-- 收到的信息是是:{{ee}} <br><br>
        信息列表是：{{chatList}}  -->
        <!-- 信息列表是：{{chatList}} -->

    </div>
</template>

<script>
    import {getChatList} from "@/request/api.js"
    import bus from "./../../utils/bus";
    //引入下拉刷新相关组件
    import {ref} from "vue";
    import {Toast} from "vant";

    export default {
        props: {
            socketMes: {type: String}
        },
        data() {
            return {
                testData: 1,
                testData2: 2,
                //引用变量
                tanBoxShow: false,
                searchFriend: "",
                ee: "",
                active: 1,
                addresslist: null,
                notfound: true,

                //下拉刷新相关变量
                isLoading: false,
                finished: false,

                //列表中最新的消息
                lastMessage: "",
                newMes:this.socketMes

            };
        },
        methods: {
            onRefresh() {
                this.getChatList();
                this.isLoading = false;
                if (this.chatList != null) {
                    this.finished = true;
                }
            },
            jumpPage(url) {
                this.$router.push({
                    path: url,
                });
            },
            changeTanBoxShow() {
                // this.tanBoxShow=!this.tanBoxShow;
                this.tanBoxShow = true;
            },
            addNewOne() {
                this.$router.push({
                    path: "/addmember",
                });
            },
            getAddressList() {
            },
            getGroupsList() {
            },
            goToGroup() {
                this.$router.push({
                    path: "/grouprelate",
                });
            },

            //聊天列表的函数
            getChatList() {
                this.chatList = [];
                // let res = $App.getChatList();
                // let newRes = JSON.parse(res).reverse();
                // if (this.chatList != newRes) {
                //   console.log("数据更新了");
                // } else {
                //   console.log("数据没更新");
                // }
                getChatList({limit:50}).then(res => {
                    console.log(res);
                    if (res.data.rows.length > 0) {
                        this.notfound = false;
                    }
                    let attr = "fsztmc";
                    let resMap = new Map();

                    // res.data.rows.filter((val, index) => {
                    //     if (!resMap.has(val[attr])) {
                    //         resMap.set(val[attr], 1);
                    //         val.name = val[attr];
                    //         val.type = "文字";
                    //         val.isgroup = false;
                    //         val.content = val.nr;
                    //         val.id = val.fsbdid;
                    //         this.chatList.push(val);
                    //     }
                    // });
                    let localId = sessionStorage.getItem('bdid');
                    res.data.rows.forEach((item, index) => {
                        if (item.fsbdid == localId || item.jsbdid == localId) {
                            item.type = item.nrlx;//0 短报文信息 1 高分数据 2 任务数据（导航）
                            item.isgroup = false;
                            item.content = item.nr;
                            item.id = item.fsbdid;
                            item.name = item.jsbdid ? item.fsztmc : "平台";//接收名称
                            this.chatList.push(item);
                        }
                    });
                    console.log(this.chatList)
                    // this.chatList = JSON.parse(res).reverse();
                }).catch(e => {
                    console.log(e);
                })

            },
            toChat(dt) {
                if (dt.isgroup === false) {
                    this.$router.push({
                        path: "/chatinfo",
                        query: {
                            id: dt.id,
                            name: dt.name,
                        },
                    });
                    console.log(
                        JSON.stringify({
                            id: dt.id,
                            name: dt.name,
                        })
                    );
                } else if (dt.isgroup === true) {
                    this.$router.push({
                        path: "/groupinfo",
                        query: {
                            id: dt.id,
                            name: dt.name,
                        },
                    });
                }
            },
            toChatFun(dt) {
                let obj = JSON.parse(dt);
                console.log("obj", obj);

                if (obj.isgroup === "0") {
                    this.$router.push({
                        path: "/chatinfo",
                        query: {
                            id: obj.id,
                            name: obj.name,
                        },
                    });
                } else if (obj.isgroup === "1") {
                    this.$router.push({
                        path: "/groupinfo",
                        query: {
                            id: obj.id,
                            name: obj.name,
                        },
                    });
                }
            },
            deleteChat(id) {
                console.log(id);
                $App.delChatByPerson(id);
                this.getChatList();
            },
            //监听相关
            onmessage(data) {
                //群聊人员的列表
                // this.onRefresh();
                this.ee = data;
            },
        },
        updated() {
            this.getChatList();
        },
        mounted() {
            this.getAddressList();
            this.getChatList();

            window.toChatFun = this.toChatFun;
            //监听函数
            bus.$on("onmessage", (dt) => {
                this.getChatList();
                this.chatList.forEach((item) => {
                    if (item.isgroup == true) {
                        if (item.id == dt.groupid) {
                            item.isread = false;
                        }
                    } else {
                        if (item.id == dt.sendid) {
                            item.isread = false;
                        }
                    }
                });
                this.onmessage(dt);
                this.$forceUpdate();
            });
        },

        beforeUpdate() {
        },
        computed: {},
        watch: {
            socketMes: {
                deep: true,
                handler(newVal, oldVal) {

                }
            }
        }
    }
</script>


<style scoped>

    .address {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .address .header {
        /* background-color: #153744; */
        color: black;
    }

    .address .tanBox {
        /* background-color: rgba(21, 55, 68, 0.71); */
        color: black;
        position: fixed;
        top: 45px;
        z-index: 999;
        right: 5px;
        width: 8rem;
    }

    .address .tanBox .tanBoxInfo {
        line-height: 30px;
        font-size: 16px;
        margin: 10px 0;
    }

    /deep/ .van-nav-bar .van-icon {
        /* color: #ffffff; */
        color: lightgray;
    }

    /deep/ .van-nav-bar .van-nav-bar__title {
        /* color: #ffffff; */
        color: black;
        font-size: 18px;
    }

    .underbox {
        display: flex;
        flex-direction: column;
    }

    /deep/ .underbox .van-tabbar-item {
        color: #999999;
    }

    /deep/ .underbox .van-tabbar-item--active {
        color: #153744;
        background-color: #fff;
    }

    .topHeader {
        height: 80px;
        width: 100%;
        display: flex;
        background-color: lightgray;
    }

    .middlePanel {
        flex: 2;
    }

    .emptyPanel {
        flex: 1;
    }

    .operatePanel {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .panel {
        width: 40px;
        /* line-height: 40px; */
        align: center;
        /* margin-right: 20px; */
        /* background-color:lightgreen */

    }

    .panel i {
        position: relative;
    }

    /* 集成聊天历史记录页 */
    .chatList {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .chatList .header {
        background-color: #153744;
        color: black;
    }

    /deep/ .van-nav-bar .van-icon {
        color: black;
    }

    /deep/ .van-nav-bar .van-nav-bar__title {
        color: black;
    }

    .notfound {
        display: flex;
        overflow-y: auto;
    }

    .notfound img {
        width: 100%;
        height: 100%;
    }

    .chatlistitem {
        height: 5rem;
        display: flex;
    }

    .chatlistitem img {
        height: 100%;
    }

    .botbox {
        height: calc(100% - 5px);
        overflow-y: auto;
    }

    .listTimeContent {
        display: inline-block;
        position: fixed;
        /* text-align: right; */
        right: 1rem;
        /*right: 1rem;*/
    }

    .listErrorContent {
        display: inline-block;
        position: fixed;
        right: 1rem;
        color: red;
        font-size: 12px;
    }

    .underbox {
        display: flex;
        flex-direction: column;
    }

    /deep/ .underbox .van-tabbar-item {
        color: #999999;
    }

    /deep/ .underbox .van-tabbar-item--active {
        color: #153744;
        background-color: #fff;
    }
</style>